<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script src="../dist/vue.js"></script>
</head>
<body>
<div id="app">
  <h1 @click='foo'>{{ name }}</h1>
  <h2 @click='bar'>{{ name2 }}</h2>
  <son-com :name2="name2" />
</div>
</body>
<script>

const GrandsonCom = {
  name: 'grandson',
  template: `<h3>孙组件：{{this.a}}+++{{this.b}}---{{this.other}}</h3>`,
  inject: ['a', 'b', 'other'],
}

const SonCom = {
  name: 'son',
  template: `
    <div>

    <grandson-com />
    </div>`,
  props: {
    name2: {
      type: String,
      required: false,
      default: () => '默认名字'
    }
  },
  data() {
    return {
      t: 9,
    }
  },
  provide() {
    return {
      b: '子注入'
    };
  },
  components: {GrandsonCom}
}

new Vue({
  name: 'par',
  components: {SonCom},
  data: {
    name: 'hello',
    name2: 'name2',
    name3: 3,
    name4: '4',
    name5: '5',
    arr: [77, 88, 99]
  },
  methods: {
    foo() {
      // this.name = 'hh'
      // this.name5++
      // this.arr.unshift(66)
      this.name2 = '7777'
    },
    bar() {
      this.name2 = '8888'
    },
    name4Options() {

    }
  },
  watch: {
    name(newVal, oldVal) {
      // console.log(newVal, oldVal)
    },
    name2: {
      handler: function (newVal, oldVal) {
        // console.log(newVal, oldVal)
      },
      immediate: true,
      sync: true
    },
    name3: ["foo", "bar"],
    name4: "name4Options",
  },
  computed: {
    cNam() {
      return this.name + ',hh'
    }
  },
  provide() {
    return {
      a: '注入',
      other: '其他'
    }
  }
}).$mount('#app')
</script>
</html>
